import { useContext } from "react";
import { GanttConsts } from "../constants";
import GanttContext from "../context";
import TimeHeader from "./time-header";

export default function THeader() {
  const { hideTaskTable, containerWidth } = useContext(GanttContext);
  return (
    <div
      style={{ height: `${GanttConsts.THEADER_HEIGHT}px` }}
      className="flex items-center border-b-1 border-x-1"
    >
      {hideTaskTable ? null : (
        <div
          style={{
            width: `${GanttConsts.TASKTABLE_WIDTH}px`,
            height: `${GanttConsts.THEADER_HEIGHT}px`,
          }}
          className="flex"
        >
          <div className="flex-1 pl-10 flex items-center">Name</div>
          <div className="w-24 flex items-center">Start</div>
          <div className="w-24 flex items-center">End</div>
          <div className="w-24 flex items-center justify-center">Progress</div>
        </div>
      )}
      <div
        className="flex overflow-hidden"
        style={{
          width: `${
            containerWidth - (hideTaskTable ? 0 : GanttConsts.TASKTABLE_WIDTH)
          }px`,
        }}
      >
        <TimeHeader />
      </div>
    </div>
  );
}
